<template>
  <div class="">
    <!--    顶部导航条-->
    <navheader></navheader>
    <div class="row" style="padding:120px 40px 40px 40px">
      <!--        左边    路由   -->
      <div class="col-md-9 column">
        <router-view></router-view>
<!--        <loading></loading>-->
      </div>
      <!--        右边-->
      <div class="col-md-3 column">
        <!--          历年国家线-->
        <div class="row">
          <div class="col-md-12 column">
            <div class="card">
              <h5 class="card-header">
                历年国家线
                <div class="btn more_btn"
                     type="btn"
                     @click="change_grades">
                  More
                </div>
              </h5>
              <div class="card-body">
                <el-row>
                  <div class="ml-4">
                    <el-button @click="change_grades()">2023年</el-button>
                    <el-button @click="change_grades()">2022年</el-button>
                  </div>
                </el-row>
                <el-row>
                  <div class="ml-4 mt-3">
                    <el-button @click="change_grades()">2021年</el-button>
                    <el-button @click="change_grades()">2020年</el-button>
                  </div>
                </el-row>
                <el-row>
                  <div class="ml-4 mt-3">
                    <el-button @click="change_grades()">2019年</el-button>
                    <el-button @click="change_grades()">2018年</el-button>
                  </div>
                </el-row>
                <el-row>
                  <div class="ml-4 mt-3">
                    <el-button @click="change_grades()">2017年</el-button>
                    <el-button @click="change_grades()">2016年</el-button>
                  </div>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <div class="row mt-5">
          <div class="col-md-12 column">
            <div class="card">
              <img :src="img" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">来得及，考得上，你可以</h5>
                <p class="card-text">
                  我知道考研这条路，走到现在，你会迷茫，会怀疑自己，感觉自己要考不上了，一路都到现在，拼的都是心理战。你肯定会有精神上的疲惫感，但是不要放弃，请你一定一定一定要相信自己。就算技不如人也好，无人问津也罢，我们要保存热情和定力到最后，因为马上就能上岸了。
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="row mt-5">
          <div class="col-md-12 column">
            <div class="card">
              <h5 class="card-header">院校信息</h5>
              <div class="card-body">
                <h5 class="card-title">了解院校信息！</h5>
                <p class="card-text">确定方向，明确目标，加油！</p>
                <div class="btn more_btn" type="btn" @click="GoCollege">
                  Go somewhere
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    底部导航条-->
    <myfooter></myfooter>
  </div>
</template>

<script>
import myfooter from '../../myfooter'
import navheader from '../../navheader'
import img from '@/assets/test/18.jpg'


export default {
  name: "KaoYan_Frame",
  components:{
    myfooter,
    navheader
  },
  data(){
    return{
      img

    }
  },
  methods:{
    change_grades(){
      if(this.$router.history.current.path !='/College_Grades'){
        this.$router.push({path:'/College_Grades'});
      }
    },
    GoCollege(){
      if(this.$router.history.current.path !='/Colleges'){
        this.$router.push({path:'/Colleges'});
      }
    },



  }
}
</script>

<style scoped>
.abs {
  /*position: absolute;*/
  float:right;
}
.card{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.card-title{
  color: #057a5b;
  font-weight: bold
}
.card-text{
  color: #5b5b5b;
}
.card-header{
  color: #333333;
  font-weight: bold
}
/*更多按钮样式*/
.more_btn{
  float:right;
  font-size: 15px;
  background-color:#B7C1AC;
  color: white;
  font-weight: bold;
  border-radius: 10px;
}
.more_btn:hover{
  background-color:white;
  color: #B7C1AC;
  border-color: #B7C1AC;
  border-width: 3px;
}
</style>
